/* Copyright 2021 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

.mode-subgroup {
  backdrop-filter: blur(30px);
  background-color: rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius-rounded-with-short-side);
  bottom: calc(var(--bottom-line) * 2 + 8px);
  color: white;
  display: flex;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.mode-subgroup > .item {
  border-radius: var(--border-radius-rounded-with-short-side);
  pointer-events: auto;
  position: relative;
}

.mode-subgroup > .item > input {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.mode-subgroup > .item > div.label {
  border-radius: var(--border-radius-rounded-with-short-side);
  font: 500 14px/20px var(--default-font-family);
  line-height: 20px;
  padding: 6px 16px;
  z-index: 0;
}

.mode-subgroup > .item input:checked + div.label {
  background: var(--grey-200);
  box-shadow: 0 2px 3px rgba(var(--grey-900-rgb), 0.3);
  color: var(--grey-900);
}
